<template>
  <vue-particles
    id="tsparticles"
    :options="particleOptions"
    @particles-loaded="particlesInit"
  />
</template>

<script setup lang="ts">
import { loadFull } from 'tsparticles'
import { reactive } from 'vue'
// 使用 reactive 包装配置
const particleOptions = reactive({
  background: {
    color: "#1a1a1a" // 与登录表单背景保持一致
  },
  particles: {
    number: {
      value: 150, // 增加粒子数量
      density: {
        enable: true,
        value_area: 80
      }
    },
    color: {
      value: ["#FF6B6B", "#4ECDC4", "#45B7D1"]  // 多彩粒子
    },
    shape: {
      type: "circle",
      stroke: {
        width: 0,
        color: "#000000"
      }
    },
    opacity: {
      value: 0.5, // 提高透明度
      random: true,
      anim: {
        enable: true,
        speed: 0.5,
        opacity_min: 0.1,
        sync: false
      }
    },
    size: {
      value: 3,
      random: true,
      anim: {
        enable: true,
        speed: 2,
        size_min: 0.1
      }
    },
    move: {
      enable: true,
      speed: 3, // 加快运动速度
      direction: "random",
      random: true,
      straight: false,
      out_mode: "out",
      bounce: false,
      attract: {
        enable: true,
        rotateX: 600,
        rotateY: 1200
      }
    }
  },
  interactivity: {
    detect_on: "canvas",
    events: {
      onhover: {
        enable: true,
        mode: "repulse" // 悬停产生斥力效果
      },
      onclick: {
        enable: true,
        mode: "push" // 点击生成新粒子
      },
      resize: true
    }
  },
  retina_detect: true
})


const particlesInit = async (engine: any) => {
  await loadFull(engine)
}
</script>

<style scoped>
#tsparticles {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1; /* 确保层级在背景之上 */
}
</style>